<template>
  <div class="cont-wrap">
    <div class="lf">
      <div
        @click="navClick(index)"
        class="item"
        :class="{ active: navCurrent == index }"
        v-for="(item, index) in navList"
        :key="index"
      >
        <div>{{ item.name }}</div>
        ▶
      </div>
    </div>
    <div class="rt">
      <div v-if="navCurrent == 0">
        <div class="head">账户管理</div>
        <div class="body">
          <vxe-table
            ref="xTable"
            :data="tableData"
            stripe
            style="width: 100%"
            max-height="400"
            border="none"
            :row-class-name="tableRowClassName"
            keep-source
          >
            <vxe-table-column width="50">
              <template slot="header">
                <span @click="onClickPencil">
                  <svg-icon :iconClass="icon"></svg-icon>
                </span>
              </template>
            </vxe-table-column>
            <vxe-table-column
              v-if="icon == 'check'"
              type="checkbox"
              width="50"
            ></vxe-table-column>
            <vxe-table-column
              title="序号"
              type="seq"
              width="60"
            ></vxe-table-column>
            <vxe-table-column field="username" title="用户名" width="225">
              <template slot-scope="{ row }">
                <el-input
                  :disabled="icon != 'check' || row.type != 'add'"
                  v-model="row.username"
                  size="mini"
                ></el-input>
              </template>
            </vxe-table-column>
            <vxe-table-column field="password" title="密码" width="225">
              <template slot-scope="{ row }">
                <el-input
                  :disabled="icon != 'check'"
                  v-model="row.password"
                  size="mini"
                  type="password"
                  @focus="openPasswordPup(row.index, row.password, row.type)"
                ></el-input>
              </template>
            </vxe-table-column>
            <vxe-table-column field="email" title="邮箱" width="225">
              <template slot-scope="{ row }">
                <el-input
                  :disabled="icon != 'check'"
                  v-model="row.email"
                  size="mini"
                ></el-input>
              </template>
            </vxe-table-column>
            <vxe-table-column field="jurisdiction" title="权限" width="130">
              <template slot-scope="{ row }">
                <el-select
                  :disabled="icon != 'check'"
                  v-model="row.jurisdictionValue"
                  placeholder="请选择"
                  size="mini"
                >
                  <el-option
                    v-for="item in row.jurisdiction"
                    :key="item.value"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </template>
            </vxe-table-column>
          </vxe-table>

          <div v-if="icon == 'check'" class="edit">
            <div class="icon" @click="onClickAdd(-1)">
              <svg-icon iconClass="add1" />
            </div>
            <div class="icon" @click="onClickDel">
              <svg-icon iconClass="del1" />
            </div>
            <!-- <div class="icon">
                <svg-icon iconClass="revoke" />
              </div> -->
            <div class="icon" @click="revertEvent">
              <svg-icon iconClass="revoke1" />
            </div>
          </div>
        </div>
        <div class="foot">
          <button @click="accountManagement">确定</button>
        </div>
      </div>
      <div v-if="navCurrent == 1" class="system-manager">
        <div class="head">系统管理</div>
        <div class="body">
          <div class="cont">
            <div class="row">
              <div class="title">NVisual地址</div>
              <el-input
                class="input"
                size="mini"
                v-model="nvisualData.nvisualUrl"
              ></el-input>
            </div>
            <div class="row">
              <div class="title">NVisual端口</div>
              <el-input
                class="input"
                size="mini"
                v-model="nvisualData.nvisualPort"
              ></el-input>
            </div>
            <div class="row">
              <div class="title">NVisual用户名</div>
              <el-input
                class="input"
                size="mini"
                v-model="nvisualData.nvisualUsername"
              ></el-input>
            </div>
            <div class="row">
              <div class="title">NVisual密码</div>
              <el-input
                class="input"
                size="mini"
                v-model="nvisualData.nvisualPasswd"
              ></el-input>
            </div>
            <div class="row">
              <div class="title">推送信息</div>
              <el-checkbox v-model="nvisualData.nvisualSync"></el-checkbox>
            </div>
            <div class="row">
              <div class="title">推送频率</div>
              <el-select
                class="input"
                v-model="nvisualData.nvisualFrequence"
                placeholder="请选择"
                size="mini"
              >
                <el-option
                  v-for="item in frequency"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </div>
            <el-input type="hidden" v-model="nvisualData.id"></el-input>
          </div>
        </div>
        <div class="foot">
          <button @click="nvisualSubmit">确定</button>
        </div>
      </div>
    </div>
    <div class="password-pup-wrap" v-if="isShowPasswordPup">
      <div class="head">
        <div class="lf">重置密码</div>
        <div class="rt" @click="closePasswordPup">X</div>
      </div>
      <div class="body">
        <div class="row">
          <div class="title">新密码：</div>
          <input type="password" v-model="newPassword" />
        </div>
        <div class="row">
          <div class="title">确定密码：</div>
          <input type="password" v-model="confirmPassword" />
        </div>
        <input type="hidden" v-model="index" />
      </div>
      <div class="foot">
        <button class="cancel-btn" @click="closePasswordPup">取消</button>
        <button class="submit-btn" @click="submit">提交</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import {
  getUser,
  putUserCreate,
  putUserDelete,
  putUserUpdate,
  getNvisual,
  putNvisualUpdate,
} from "@/api/manage";

@Component
export default class set extends Vue {
  public isShowPasswordPup: Boolean = false;
  public frequencyValue: Number = null;
  public frequency: Array<object> = [
    {
      label: "每天",
      value: 1,
    },
    {
      label: "每小时",
      value: 2,
    },
    {
      label: "每星期",
      value: 3,
    },
  ];
  public navList: Array<object> = [
    {
      name: "账户管理",
    },
    {
      name: "NVisual设置",
    },
  ];
  public navCurrent: Number = 0;
  public icon: String = "pencil";
  public checkAll: boolean = false;
  public checkeds: Array<object> = [];

  public tableData: Array<object> = [];
  public multipleSelection: Array<any> = [];

  public newPassword: string = ""; //新密码
  public confirmPassword: string = ""; //确定密码
  public index: string = "";

  public nvisualData: Array<any> = [];

  public created() {
    this.getUser();
    this.getNvisual();
  }

  public tableRowClassName({ row, rowIndex }) {
    //把每一行的索引放进row
    row.index = rowIndex;
  }

  // nvisual配置查询
  public getNvisual() {
    getNvisual({}).then((res: any) => {
      console.log(res.data);
      if (res.data.length > 0) {
        res.data[0].nvisualSync =  res.data[0].nvisualSync == 'string' ? false : res.data[0].nvisualSync;
        this.nvisualData = res.data[0];
      }
    });
  }
  // nvisual配置更新
  public nvisualSubmit() {
    putNvisualUpdate(this.nvisualData).then((res: any) => {
      console.log(res.data);
      if (res.data) {
        this.$message({
          showClose: true,
          message: "nvisual配置更新成功！",
          type: "success",
        });
        this.getNvisual();
      }
    });
  }

  //获取用户列表
  public getUser() {
    getUser({}).then((res: any) => {
      res.data.map((item: any) => {
        item.checked = false;
        item.jurisdiction = [
          {
            name: "超级管理员",
            value: 1,
          },
          {
            name: "管理员",
            value: 2,
          },
          {
            name: "编辑者",
            value: 3,
          },
          {
            name: "用户",
            value: 4,
          },
        ];
      });
      this.tableData = res.data;
    });
  }

  public navClick(index: any) {
    this.navCurrent = index;
  }
  public onClickPencil() {
    console.log("click", this.icon);
    this.icon = this.icon === "pencil" ? "check" : "pencil";
  }
  // 账户管理确定
  public accountManagement() {
    const $table = this.$refs.xTable;
    const selectRecords = $table.getCheckboxRecords();
    console.log("选中", selectRecords);
    const {
      insertRecords,
      removeRecords,
      updateRecords,
    } = $table.getRecordset();
    console.log(insertRecords);
    console.log(removeRecords);
    console.log(updateRecords);
    if (selectRecords.length > 0) {
      let patten = /^([a-zA-Z0-9]+[_|_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
      if (insertRecords.length > 0) {
        // 新增
        insertRecords.map((item: any) => {
          let email = item.email.replace(/\s+/g, "");
          let username = item.username.replace(/\s+/g, "");
          let password = item.password.replace(/\s+/g, "");
          // if (!patten.test(email)) {
          //     this.$message({
          //       showClose: true,
          //       message: "请输入正确的邮箱!",
          //       type: "error",
          //     });
          //   } else if (username.length <= 0) {
          //   this.$message({
          //     showClose: true,
          //     message: "用户名不能为空!",
          //     type: "error",
          //   });
          //   console.log(2);

          // } else
          if (username.length <= 0) {
            this.$message({
              showClose: true,
              message: "用户名不能为空!",
              type: "error",
            });
          } else if (password.length <= 0) {
            this.$message({
              showClose: true,
              message: "密码不能为空!",
              type: "error",
            });
          } else {
            console.log("email", email);
            console.log("name", username);
            console.log("password", password);

            // 创建用户
            putUserCreate({
              email: email,
              password: password,
              username: username,
            }).then((res) => {
              console.log("创建用户", res.data);
              if (res.data.result == "success") {
                this.$message({
                  showClose: true,
                  message: "创建成功！",
                  type: "success",
                });
                this.getUser();
                this.icon = "pencil";
              } else if ((res.data.result = "fail")) {
                this.$message({
                  showClose: true,
                  message: res.data.reason,
                  type: "error",
                });
              }
            });
          }
        });
      }
      if (updateRecords.length > 0) {
        // 修改
        console.log("修改");
        updateRecords.map((item: any) => {
          putUserUpdate({
            username: item.username,
            email: item.email,
            password: item.password,
          }).then((res: any) => {
            console.log(res.data);
            if (res.data.result == "success") {
              this.$message({
                showClose: true,
                message: "修改成功！",
                type: "success",
              });
              this.getUser();
              this.icon = "pencil";
            } else if ((res.data.result = "fail")) {
              this.$message({
                showClose: true,
                message: res.data.reason,
                type: "error",
              });
            }
          });
        });
      }
    } else {
      this.$message({
        showClose: true,
        message: "至少选择一项!",
        type: "error",
      });
    }
  }
  public async onClickAdd(row: any) {
    const $table = this.$refs.xTable;
    const record = {
      type: "add",
      checked: false,
      username: "",
      password: "",
      email: "",
      desc: "V2",
      jurisdiction: [
        {
          name: "超级管理员",
          value: 1,
        },
        {
          name: "管理员",
          value: 2,
        },
        {
          name: "编辑者",
          value: 3,
        },
        {
          name: "用户",
          value: 4,
        },
      ],
    };
    const { row: newRow } = await $table.insertAt(record, row);
  }

  public onClickDel() {
    const $table = this.$refs.xTable;
    const selectRecords = $table.getCheckboxRecords();
    console.log("选中", selectRecords);

    if (selectRecords.length) {
      this.$confirm("你确定要删除数据?", "提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //删除操作
          console.log("delete");
          // $table.removeCheckboxRow();
          selectRecords.map((item: any) => {
            console.log(item.username);
            putUserDelete({ username: item.username }).then((res: any) => {
              console.log("删除", res.data);
              if (res.data.result == "success") {
                this.$message({
                  showClose: true,
                  message: "删除成功！",
                  type: "success",
                });
                this.getUser();
                this.icon = "pencil";
              } else if ((res.data.result = "fail")) {
                this.$message({
                  showClose: true,
                  message: res.data.reason,
                  type: "error",
                });
              }
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "操作失败",
          });
        });
    } else {
      this.$message({
        showClose: true,
        type: "error",
        message: "请至少选择一条数据",
      });
    }
  }
  public revertEvent() {
    // Object.assign(this.$data.tableData, this.$options.data.call(this).tableData);//原生还原
    const $table = this.$refs.xTable;
    this.$confirm("你确定要还原数据?", "提示", {
      distinguishCancelAndClose: true,
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        $table.revertData();
        this.icon = "pencil";
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "操作失败",
        });
      });
  }
  public openPasswordPup(index: any, password: any, type: any) {
    if (password.length != 0 && type != "add") {
      this.isShowPasswordPup = true;
      this.index = index;
    }
  }
  public submit() {
    if (
      this.newPassword.trim().length > 0 &&
      this.confirmPassword.trim().length > 0
    ) {
      if (this.newPassword.trim() != this.confirmPassword.trim()) {
        this.$message({
          showClose: true,
          type: "error",
          message: "新密码和确定密码不相同",
        });
      } else {
        console.log(this.newPassword + "-" + this.confirmPassword);
        console.log(this.index);
        this.tableData[this.index].password = this.newPassword;
        this.isShowPasswordPup = false;
        this.newPassword = "";
        this.confirmPassword = "";
      }
    } else {
      this.$message({
        showClose: true,
        type: "error",
        message: "密码不能全为空格",
      });
    }
  }
  public closePasswordPup() {
    this.isShowPasswordPup = false;
  }
}
</script>

<style lang="stylus" scoped>
.cont-wrap
  width 1230px
  height 590px
  margin 0 auto
  margin-top 135px
  background #fff
  display flex
  .lf
    width 190px
    height 100%
    -moz-box-shadow 3px 0px 3px #DDDDDD
    -webkit-box-shadow 3px 0px 3px #DDDDDD
    box-shadow 3px 0px 3px #DDDDDD
    padding-top 45px
    .item.active
      color #1269FF
      background #E9F2FF
    .item:hover
      background #F7FAFF
      color #1659C2
    .item
      position relative
      display flex
      justify-content space-between
      height 58px
      align-items center
      padding-left 65px
      padding-right 22px
      cursor pointer
      font-size 13px
    .item.active::after
      position absolute
      top 0
      height 100%
      left 0
      content ''
      width 0
      border-left solid #1269FF 4px
  .rt
    width 1040px
    padding 35px
    .head
      text-align left
      font-size 18px
      color #333
      font-weight 700
    .body
      // max-height 360px
      position relative
      // padding-bottom 50px
      border-bottom dotted #A4A4A4 1px
      /deep/.vxe-table
        overflow visible
      // /deep/.vxe-table::after
      // position absolute
      // bottom -60px
      // left 0
      // content ''
      // width 100%
      // border-bottom dotted #A4A4A4 1px
      /deep/.vxe-table td, .vxe-table th
        height 40px
        padding 0
      // .vxe-table td
      // text-align center
      /deep/.vxe-table thead
        font-size 13px
        color #000
        font-weight 700
        .svg-icon
          cursor pointer
      /deep/.vxe-table::before
        width auto
        height 0
      /deep/.el-input__inner
        border-radius 0
      /deep/.el-input.is-disabled .el-input__inner
        border none
        background none
      /deep/.vxe-table td
        border none
      /deep/.vxe-table th.is-leaf
        border-bottom none
      /deep/.vxe-table--striped .vxe-table__body tr.vxe-table__row--striped td
        background #ebebeb
      /deep/.el-input.is-disabled .el-input__inner
        color #000
      /deep/.el-input--mini .el-input__inner
        padding 0 2px
        width 100%
      /deep/.el-select>.el-input.is-disabled .el-input__suffix
        display none
      .edit
        width 33px
        background #69aeff
        position absolute
        top 40px
        text-align center
        .icon
          height 33px
          line-height 33px
          border-bottom 1px dotted #fff
          margin 0 4px
        .icon:last-child
          border-bottom none
      .cont
        width 315px
        margin 0 auto
        .row
          display flex
          align-items center
          height 25px
          font-size 13px
          color #000
          margin-top 20px
          .title
            width 90px
            text-align right
            margin-right 18px
            font-weight 700
          .input
            width 211px
            height 25px
/deep/.vxe-table--render-default .vxe-header--column:not(.col--ellipsis)
  padding 0
  height 41px
  line-height 41px
  border-bottom solid 2px #69aeff
/deep/.vxe-table--render-default .vxe-body--row.row--stripe
  background #f0f2f4
.cont-wrap .system-manager .body
  border-top solid 2px #69aeff
  margin-top 20px
  height 320px
  padding-bottom 0
  border-bottom dotted #a4a4a4 1px
.foot
  text-align center
  button
    margin-top 36px
    outline none
    border none
    width 117px
    height 30px
    line-height 30px
    background #1269ff
    color #fff
    border-radius 5px
    font-size 13px
.password-pup-wrap
  width 350px
  height 185px
  position fixed
  left 0
  right 0
  top 0
  bottom 0
  margin auto
  background rgba(255, 255, 255, 0.898039215686275)
  border solid 1px rgba(179, 179, 179, 1)
  .head
    display flex
    justify-content space-between
    align-items center
    padding-left 25px
    padding-right 2px
    font-size 12px
    color #F0EBEB
    background #333333
    height 28px
    .lf
      width auto
      height 100%
      box-shadow none
      padding-top 0
      line-height 28px
    .rt
      padding 0
      width 23px
      height 23px
      line-height 23px
      text-align center
      cursor pointer
    .rt:hover
      background #c80505
  .body
    margin 0 17px
    padding 18px 0
    border-bottom solid 1px #C8C8C8
    .row:first-child
      margin-top 0
    .row
      display flex
      justify-content center
      font-size 12px
      margin-top 8px
      .title
        width 60px
        text-align right
        line-height 27px
        margin-right 15px
      input
        width 177px
        height 27px
        padding 0 2px
        border solid 1px #C4C4C4
        border-radius 0
  .foot
    button
      margin-top 10px
      margin-bottom 20px
      width 88px
      height 30px
      border-radius 2px
    .cancel-btn
      margin-right 28px
      background #C6C6C6
    .submit-btn
      background #2F8AFF
</style>